<template>
  <div>
    <h2>{{title}}</h2>
    <h3 class="size">
      {{$t('message.cglx')}}
      <span>: {{tableData.releaseName}}</span>
    </h3>
    <p class="divider"></p>
    <div class="mian-title">{{$t('message.cgmc')}}</div>
    <div class="inner-style">
      <el-form label-width="136px" class="el-datashow-list">
        <el-form-item :label="$t('message.chinese')+':'">
          <p>{{tableData.releaseTitleCn}}</p>
        </el-form-item>
        <el-form-item v-if="tableData.releaseTitleEn!==''" :label="$t('message.english')+':'">
          <p>{{tableData.releaseTitleEn}}</p>
        </el-form-item>
      </el-form>
    </div>
    <p class="divider"></p>
    <div class="mian-title">{{$t('message.cgjj')}}</div>
    <div class="inner-style">
      <el-form label-width="136px" class="el-datashow-list">
        <el-form-item :label="$t('message.fbnr')+':'">
          <p>{{tableData.releaseContent}}</p>
        </el-form-item>
        <el-form-item v-if="this.cfileList.length!==0" :label="$t('message.scfj')+':'">
          <down-load :pfileList="cfileList"></down-load>
        </el-form-item>
        <el-form-item :label="$t('message.fbrq')+':'">
          <p>{{tableData.releaseTime | dateFormats}}</p>
        </el-form-item>
        <el-form-item :label="$t('message.fbdq')+':'">
          <p>
            {{border}}
            <span
              v-if="tableData.border=='within'"
              style="margin-left: 14px;"
            >{{tableData.provinceName}}</span>
            {{tableData.cityName}}
            <span
              v-if="tableData.border=='overseas'"
            >{{tableData.regionName}}</span>
          </p>
        </el-form-item>
        <el-form-item v-if="tableData.border=='overseas'" :label="$t('message.zfqysd')+':'">
          <p>
            <span>{{tableData.attributionProvinceName}}</span>

            <span>{{tableData.attributionCityName}}</span>
          </p>
        </el-form-item>
        <el-form-item :label="$t('message.fbcj')+':'">
          <p>{{tableData.releaseLevelName}}</p>
        </el-form-item>
      </el-form>
    </div>
    <p class="divider"></p>
    <div class="mian-title">{{$t('message.hyly')}}</div>
    <div class="inner-style">
      <el-form label-width="136px" class="el-datashow-list">
        <el-form-item :label="$t('message.hyly')+':'">
          <p>
            {{tableData.releaseFieldOneName}}
            <span
              v-if="tableData.releaseFieldTwoName!==''"
            >-{{tableData.releaseFieldTwoName}}</span>
            <span v-if="tableData.releaseFieldThreeName!==''">-{{tableData.releaseFieldThreeName}}</span>
            <span v-if="tableData.releaseFieldOther!==''">:{{tableData.releaseFieldOther}}</span>
          </p>
        </el-form-item>
      </el-form>
    </div>
    <div v-if="isReview">
      <p class="divider"></p>
      <div class="mian-title">{{$t('message.txrxx')}}</div>
      <div class="inner-style">
        <el-form label-width="136px" class="el-datashow-list">
          <el-form-item :label="$t('message.tbr')+':'">
            <p>{{tableData.userName}}</p>
          </el-form-item>
          <el-form-item :label="$t('message.lxdh')+':'">
            <p>{{tableData.userPhone}}</p>
          </el-form-item>
          <el-form-item :label="$t('message.zjhm')+':'">
            <p>{{tableData.landlineNumber}}</p>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import downLoad from "@components/uploadFile/downLoad.vue";
export default {
  data() {
    return {
      tableData: {},
      cfileList: []
    };
  },
  props: ["title", "isReview"],
  mounted() {
    this.getMessage();
  },
  computed: {
    border() {
      if (this.tableData.border == "within") {
        return this.$t("message.jn");
      } else if (this.tableData.border == "overseas") {
        return this.$t("message.jw");
      } else {
        return "";
      }
    }
  },
  components: {
    downLoad
  },
  methods: {
    getMessage() {
      this.$axios
        .get("/api/releaseResult/getReleaseResult", {
          params: {
            id: this.$route.query.id
          }
        })
        .then(res => {
          if (res.code === 200) {
            this.tableData = res.data;
            if (res.data.ossUrlList !== "") {
              this.cfileList = res.data.ossUrlList;
              console.log(this.cfileList);
            }
          } else {
            this.$message.error(res.message);
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.contract-details {
  width: 88%;
  padding: 15px;
  margin: 0 auto;
}
.inner-style {
  width: 82%;
  margin: 0 auto;
}

.divider {
  width: 100%;
  border-top: 1px dashed #d9e1e9;
  margin-top: 12px;
}
.mian-title {
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  line-height: 16px;
  font-size: 16px;
  border-left: 4px solid #fe8c01;
  padding-left: 10px;
  margin: 12px 0 24px 0;
}
h2 {
  margin: 0 0 30px 0;
  font-size: 18px;
  text-align: center;
}
.size {
  font-size: 15px;
}
.el-form-item {
  margin-bottom: 16px;
}
.spanStyle {
  margin-left: 16px;
  margin-right: 4px;
  font-size: 14px;
  color: #606266;
}
</style>
